<template>
<!--  <simple-layout title="登录">-->
  <simple-layout title=" ">
    <!--<form class="mui-input-group">-->
    <!--<div class="mui-input-row">-->
    <!--<label>用户名</label>-->
    <!--<input type="text" class="mui-input-clear" placeholder="请输入用户名" :value="phone">-->
    <!--</div>-->
    <!--<div class="mui-input-row">-->
    <!--<label>密码</label>-->
    <!--<input type="password" class="mui-input-password" placeholder="请输入密码":value="password">-->
    <!--</div>-->
    <!--<div class="mui-button-row">-->
    <!--<button type="button" class="mui-btn mui-btn-primary"  @click="loginByPwd()">确认</button>-->
    <!--<button type="button" class="mui-btn mui-btn-danger">取消</button>-->
    <!--</div>-->
    <!--</form>-->



    <div class="login-top">
      <span @click="codeLogin" :class="[isCodeLogin ? 'code-login':'']">验证码登陆</span>
      <span @click="pwdLogin" :class="[!isCodeLogin ? 'code-login':'pwd-login']" class="login-tab-pwd">账号密码登陆</span>
    </div>

    <form class="ab-input-group" v-show="isCodeLogin">
      <div class="ab-input-row">
        <span class="login-forget" @click="sendCode"><span :class="[numCode !== '发送验证码'? 'blue' : '']">{{ numCode }}{{numCode !== '发送验证码'? 's' : ''}}</span> {{numCode !== '发送验证码' ? '后重发' :''}}</span>
        <input type="text" class="ab-input ab-input-clear" placeholder="请输入您手机号" v-model="phone">
      </div>
      <div class="ab-input-row">
        <input type="password" class="ab-input ab-input-password" placeholder="请输入验证码" v-model="code">
      </div>
      <div class="ab-button-row">
        <button type="button" class="ab-btn ab-btn-primary" @click="loginBySmsCode">登 陆</button>
      </div>
      <div class="login-or-reg">
        <span>没有账号？</span>
        <span class="login-reg" @click="register">立即注册</span></div>
    </form>

    <form class="ab-input-group" v-show="!isCodeLogin">
      <div class="ab-input-row">
<!--        <img src="../../assets/login/Icon／ic_clean@2x.png" alt class="login-img"/>-->
        <input type="text" class="ab-input ab-input-clear" placeholder="请输入您的账号" v-model="phone">
      </div>
      <div class="ab-input-row">
        <span class="login-forget" @click="forgetPwd">忘记密码?</span>
        <input type="password" class="ab-input ab-input-password" placeholder="请输入您的密码" v-model="password">
      </div>
      <div class="ab-button-row">
        <button type="button" class="ab-btn ab-btn-primary" @click="loginByPwd">登 陆</button>
        <button type="button" class="ab-btn ab-btn-primary" @click="resetPwd">修改密码</button>
      </div>

<!--      修改密码 -->
<!--      <div class="ab-button-row">-->
<!--        <button type="button" class="ab-btn ab-btn-primary" @click="resetPwd">修改密码</button>-->
<!--      </div>-->

      <div class="login-or-reg">
        <span>没有账号？</span>
        <span class="login-reg" @click="register">立即注册</span>
      </div>
    </form>

  </simple-layout>
</template>


<script>
  import AuthService from '../../service/auth';
  import UserService from '../../service/user';
  import SimpleLayout from '../../components/SimpleLayout';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        phone: '',
        password: '',
        code: '',
        toUrl: '/',
        isCodeLogin: false,
        numCode: '发送验证码',
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
      console.log(this.$cookie.get('token'))
      this.initRouter();
    },
    methods: {
      // 修改密码
      resetPwd() {
        this.$router.push({ name: 'ResetPwd' })
      },
      // 点击注册
      register() {
        this.$router.push({ name: 'Register' })
      },
      // 点击发送验证码
      sendCode() {
        if (this.numCode !== '发送验证码') {
          return
        }
        const params = {
          phone: this.phone,
        }
        AuthService.sendCodeForLogin(params).then((res) => {
          if (res.status == 200) {
            this.numCode = 5;
            this.validateCodeClock = setInterval(() => {
              this.numCode = this.numCode - 1;
              if (this.numCode <= 0) {
                clearInterval(this.validateCodeClock);
                this.numCode = '发送验证码';
              }
            }, 1000);
          }
        })
      },
      // 点击验证码登陆
      codeLogin() {
        this.isCodeLogin = true;
      },
      // 点击账号密码登陆
      pwdLogin() {
        this.isCodeLogin = false;
      },
      // 点击忘记密码
      forgetPwd() {
        this.$router.push({ name:"ForgetPwd" });
      },
      //获取登录后的跳转链接
      initRouter() {
        const query = this.$route.query;
        this.toUrl = query.redirect || '/';
      },
      //密码登录
      loginByPwd() {
        const params = {
          phone: this.phone,
          password: this.$md5(this.password)
        }
        // const params = {
        //   phone: '15820440742',
        //   password: '96e79218965eb72c92a549dd5a330112'
        // }
        AuthService.login(params).then((res) => {
          if (res.status == 200) {
            this.$cookie.set('token', res.resultData.token, {expires: '1D'});
            this.findUserInfo();
          }else if(res.status === '001001'){
            mui.confirm('请重新登录','用户名或者密码错误',new Array('关闭'),(e)=>{
            });
          }
        })
      },
      //短信登录
      loginBySmsCode() {
        const params = {
          phone: this.phone,
          code: this.code
        }
        AuthService.loginCode(params).then((res) => {
          if (res.status == 200) {
            this.$cookie.set('token', res.resultData.token, {expires: '1D'});
            this.findUserInfo();
          }else if(res.status === '001020'){
            mui.confirm('','验证码错误',new Array('关闭'));
          }
        })
      },
      //用户信息
      findUserInfo() {
        UserService.findUserInfo().then((res) => {
          if (res.status == '200') {
            this.$cookie.set('user', JSON.stringify(res.resultData), {expires: '1D'});
            this.$router.push(this.toUrl);
          } else if (res.status == '001003') {
            mui.confirm('','验证码错误',new Array('token过期'),(e)=>{
              if(e.index == 0){
                this.$router.push('/login');
              }
            });
          }
        })
      },
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ab-btn.ab-btn-primary{
    font-size: 20px;
  }
  .ab-input-group {
    margin-top: 60px;
  }

  .ab-input-row {
    margin-top: 10px;
    position: relative;
  }

  .ab-input {
    background: transparent;
    width: 300px;
    margin:10px;
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .ab-btn-primary {
    margin-top: 50px;
    width: 300px;
    height: 40px;
    color: white;
    background: rgb(130, 130, 244);
    border-radius: 15px;
    border: 0px;
  }



  .login-top{
    width: 300px;
    text-align: initial;
    margin: 6rem auto 0;
  }
  .login-top>span{
    display: inline-block;
  }
  .code-login {
    font-weight: bolder;
    font-size: 24px;
  }
  .login-tab-pwd{
    margin-left: 2rem;
  }
  /*.login-top>span:first-child{*/
  /*  color:#ccc;*/
  /*  font-size: 18px;*/
  /*}*/
  /*.login-top>span:last-child{*/
  /*  font-size: 24px;*/
  /*  margin-left: 2rem;*/
  /*  font-weight: bolder;*/
  /*}*/
  input::-webkit-input-placeholder { /* WebKit browsers */
    color: #ccc;
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ccc;
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ccc;
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #ccc;
  }
  .login-forget{
    font-size: 16px;
    position: absolute;
    right: 13%;
    top: 34%;
    color: black;
  }
  .blue{
    color: blue;
  }
  .login-or-reg{
    margin-top: 1rem;
    font-size: 14px;
  }
  .login-reg{
    color: blue;
  }

  .login-img{
    position: absolute;
    right: 11%;
    width: 1.5rem;
    top: 39%;
  }
</style>
